<template>
  <view class="page-container">
    <view class="main-container">
      <view class="form-container">
        <view class="item">
            <view class="bg-img">
              <img src="~@/static/items_slices/rowboats.jpg" alt="">
            </view>
        </view>
        <view v-if="uploadImgSrc" class="item">
          <img :src="uploadImgSrc" alt="" style="width: 100%;">
        </view>
        <view class="item">
          <button type="button" @click="submit" class="btn-res">立即预约</button>
        </view>
        <view class="foot-bottom">
        <view class="foot">
             <view class="footer">
                 <a href="/#/pages/order/reservation">
                   <img src="~@/static/order_slices/index.png">
                 </a>
               <span>
                 首页
               </span>
              </view>
                <view class="footer">
                  <a href="/#/pages/order/index">
                  <img src="~@/static/order_slices/order.png">
                  </a>
                  <span>
                 订单
                  </span>
                </view>
            <view class="footer">
              <a @click="jumpToMine">
                <img src="~@/static/order_slices/mine.png">
              </a>
              <span>
                 我的
              </span>
            </view>
        </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  onLoad(option) {
    console.log("option4", option)
    if (option) {
      if (!!option.jump) {

      } else {
        location.href = '/#/pages/login/wechat?redirect=' + encodeURI('/pages/order/reservation?jump=1');
      }
    }
  },
  methods:{
    submit(){
      location.href = '/#/pages/login/wechat?redirect=' + encodeURI('/pages/items/index');
    },
    jumpToMine() {
      location.href = '/#/pages/parking/mine'
    }
  }
})
</script>
<style lang="scss" scoped>
.nav-title{
  text-align: center;
  color: blue;
  height: 40px;
}
.btn-res{
  background: #00A7EA;
  color: #fff;
}
.bg-img img{
  margin-top:5px;
  width: 100%;
}
.btn-res{
  margin-top: 20px;
  width: 80%;
}
.foot-bottom{
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 70px;
}
.foot{
  display: flex;
  width: 100%;
  border-top:1px solid;
  border-color: rgb(215,215,215);
  box-shadow:0 0 4vm rgba(0,0,0,1);
 ;
}
.footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 33%;
  text-align: center;
}
.footer{
  font-size: 14px;
}
.foot img{
  padding-top: 10px;
  width: 25px;
}
</style>

